<!DOCTYPE html>
<html lang="ch-zn">
<head>
    <meta charset="UTF-8">
    <title>Build CRUD DataGrid with jQuery EasyUI - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
</head>
<body style="text-align: center;">
<h2>CRUD DataGrid</h2>
<p>Double click the row to begin editing.</p>

<table id="dg" title="My Users" style="width:90%;height:700px"
       toolbar="#toolbar" pagination="true" idField="id"
       rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
    <tr>
        <th field="deviceId" width="50" editor="{type:'validatebox',options:{required:true}}">deviceId</th>
        <th field="deviceModelName" width="50" editor="{type:'validatebox',options:{required:true}}">deviceModelName</th>
        <th field="state" width="50" editor="{type:'validatebox',options:{required:true}}">state</th>
        <th field="installAddress" width="50" editor="{type:'validatebox',options:{required:true}}">installAddress</th>
    </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
<script type="text/javascript">
    $(function(){
        $('#dg').edatagrid({});
        $.ajax({
            type: "POST",
            url: "/nbIotYunDeviceInfo/list?page=1&rows=10",
            data: {name: "John", email: "john@example.com"}, // 根据需要发送的数据格式化，如JSON或序列化表单数据等。
            success: function(response) {
                console.log('成功', response);
                // 更新DataGrid或其他操作...

                $('#dg').datagrid('loadData', response.data.records);
                /*$('#dg').datagrid({
                    data: [
                        {deviceId:'value11', deviceModelName:'value12'},
                        {deviceId:'value21', deviceModelName:'value22'}
                    ]
                });*/
            },
            error: function() {
                console.log('错误');
            }
        });
    });
</script>

</body>
</html>